.App {
  width: 100%;
  height: 100%;
}
.box{
  width: 100%;
  height: 100%;
  background: pink;
  display: flex;
  flex-direction: column;
}
.top{
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #F00F31;

}
.box>img{
  width: 100%;
  height: 100%;
  display: block;
}
.loading{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.Box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  width: 100%;
  background: #F00F31;
  display: flex;
}
.header-lef{
  width: 0.86rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F00F31;
  padding-right: 0.06rem;
  padding-top: 0.14rem;
  box-sizing: border-box;
}
.header-lef>dl{
  width: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}
.header-lef>dl>dt{
  width: 100%;
}
.header-lef>dl>dt>img{
  width: 100%;
  height: auto;
  display: block;
}
.header-lef>dl>dd{
  width: 100%;
  font-size: 0.05rem;
  color: white;
}
.header-rig{
  width: 0.86rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F00F31;
  padding-left: 0.06rem;
  padding-top: 0.14rem;
  box-sizing: border-box;
}
.header-rig>dl{
  width: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}
.header-rig>dl>dt{
  width: 100%;
}
.header-rig>dl>dt>img{
  width: 100%;
  height: auto;
  display: block;
}
.header-rig>dl>dd{
  width: 100%;
  font-size: 0.05rem;
  color: white;
}
.header-main{
  flex: 1;
  padding-top: 0.14rem;
  padding-bottom: 0.14rem;
  box-sizing: border-box;
  
}
.main-box{
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
}
.main-box-lef{
  width: 0.5rem;
  margin-left: 0.18rem;
  margin-right: 0.14rem;
}
.main-box-lef>img{
  width: 100%;
  height: auto;
  display: block;
}
.main-box-rig{
  width: 0.5rem;
  margin-right: 0.18rem;
}
.main-box-rig>img{
  width: 100%;
  height: auto;
  display: block;
}
.main-box>input{
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;

}
.header-bot{
  width: 100%;
  display: flex;
  padding-top: 0.16rem;
  box-sizing: border-box;
  background: red;
}
.header-heng-lef{
  width: 100%;
  white-space:nowrap;
  overflow-x: auto;
}
.header-heng-lef::-webkit-scrollbar{height: 0;}
.header-heng-lef>span{
  width:2rem;
  font-size: 0.25rem;
  display: inline-block;
  text-align: center;
  vertical-align: middle; 
  color: white;
}
.header-heng-rig{
  width: 1.28rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.3rem;
  background: red;
}
.main{
  flex: 1;
  /* background: slateblue; */
  overflow: auto;
}
.main::-webkit-scrollbar{width: 0;}
.main>div{
  width: 100%;
  height: 100%;
  /* background: red; */
}
.main .nei{
 width: 100%;
 height: 100%;
}
.neiOne{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0.06rem;
  box-sizing: border-box;
  margin-bottom: 0.32rem;
}
.neiOne>dl{
  width: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0.26rem;
}
.neiOne>dl>dt{
  width: 100%;
  margin-bottom: 0.24rem;
}
.neiOne>dl>dt>img{
  width: 100%;
  height: auto;
  display: block;
}
.neiOne>dl>dd{
  font-size: 0.2rem;
}
.neiTwo{
  width: 100%;
  padding: 0 0.26rem;
  box-sizing: border-box;
}
.neiTwo>img{
  width: 100%;
  height: auto;
  display: block;
}
.neiThree{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0.2rem;
  box-sizing: border-box;
}
.neiThree-img{
  width: 2.94rem;
}
.neiThree-img>img{
  width: 100%;
  height: auto;
  display: block;
}
.footer{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: slateblue;
}
.footer>div{
  font-size: 0.3rem;
  padding:0.2rem 0;
  
}
a{
  color: aqua;
}
.xq{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.xq>.btn{
  margin-top: 2rem;
}
.xq-img{
  width: 2rem;
}
.xq-img>img{
  width: 100%;
  height: auto;
  display: block;
}
.login{
  width: 100%;
  height: 100%;
  background: #680871;
  display: flex;
  flex-direction: column;
}
.usernameimg{
  width: 100%;
}
.usernameimg>img{
  width: 100%;
  height: auto;
  display: block;
}
.inputs{
  flex: 1;
  display: flex;
  flex-direction: column;
  /* background: skyblue; */
  padding:0 1rem;
  box-sizing: border-box;     
}
.inputs input{
  width: 100%;
  height: 0.8rem;
  margin-bottom: 0.2rem;
  border: 0;
  outline: none;
}
button{
  width: 100%;
  height: 0.8rem;
  margin-bottom: 0.2rem;
  border: 0;
  outline: none;
}